<template>
	<view class="container top">
		<view class="form-list">
			<view class="form-item">
				<text class="label">负责人</text>
				<input class="input" type="text" v-model="form.name" placeholder="请输入姓名" />
			</view>
			
			<view class="form-item">
				<text class="label">身份证号码</text>
				<input class="input" type="idcard" v-model="form.idCard" placeholder="请输入身份证号码" />
			</view>
			
			<view class="form-item">
				<text class="label">手机号</text>
				<input class="input" type="number" v-model="form.phone" placeholder="请输入手机号" />
				<text class="verify-code" @click="getVerifyCode">获取验证码</text>
			</view>
			
			<view class="form-item">
				<text class="label">验证码</text>
				<input class="input" type="number" v-model="form.verifyCode" placeholder="请输入验证码" />
			</view>
			
			<view class="form-item">
				<text class="label">店名</text>
				<input class="input" type="text" v-model="form.shopName" placeholder="请输入店名" />
			</view>
			
			<view class="form-item">
				<text class="label">工商营业执照号码</text>
				<input class="input" type="text" v-model="form.licenseNo" placeholder="请输入营业执照号码" />
			</view>
			
			<view class="form-item">
				<text class="label">经营区域</text>
				<picker mode="region" @change="onRegionChange" :value="form.region">
					<view class="picker-value">{{form.region.join(' ') || '选择区域'}}</view>
				</picker>
			</view>
			
			<view class="form-item">
				<text class="label">地址</text>
				<input class="input" type="text" v-model="form.address" placeholder="请输入详细地址" />
			</view>
			
			<view class="form-item textarea-item">
				<text class="label">商家介绍</text>
				<textarea class="textarea" v-model="form.description" placeholder="请输入商家介绍"></textarea>
			</view>
			
			<view class="upload-section">
				<text class="section-title">身份证正反面照片</text>
				<view class="upload-list">
					<view class="upload-item" v-for="(item, index) in form.idCardImages" :key="index">
						<image :src="item" mode="aspectFill"></image>
						<text class="delete-btn" @click="deleteImage('idCard', index)">删除</text>
					</view>
					<view class="upload-btn" @click="chooseImage('idCard')" v-if="form.idCardImages.length < 2">
						<text class="plus">+</text>
					</view>
				</view>
			</view>
			
			<view class="upload-section">
				<text class="section-title">营业执照</text>
				<view class="upload-list">
					<view class="upload-item" v-if="form.licenseImage">
						<image :src="form.licenseImage" mode="aspectFill"></image>
						<text class="delete-btn" @click="deleteImage('license')">删除</text>
					</view>
					<view class="upload-btn" @click="chooseImage('license')" v-if="!form.licenseImage">
						<text class="plus">+</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="submit-btn" @click="handleSubmit">
			保存
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
	name: '郑商所',
	idCard: '412032654123654123',
	phone: '15253654521',
	verifyCode: '',
	shopName: '店小友',
	licenseNo: '454515442115422212255',
	region: [],
	address: '山阳区迎宾路32号',
	description: '商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍',
	idCardImages: [],
	licenseImage: ''
});

function getVerifyCode() {
	uni.showToast({
		title: '验证码已发送',
		icon: 'none'
	});
}

function onRegionChange(e) {
	form.value.region = e.detail.value;
}

function chooseImage(type) {
	uni.chooseImage({
		count: type === 'idCard' ? 2 : 1,
		success: (res) => {
			if (type === 'idCard') {
				form.value.idCardImages = [...form.value.idCardImages, ...res.tempFilePaths].slice(0, 2);
			} else {
				form.value.licenseImage = res.tempFilePaths[0];
			}
		}
	});
}

function deleteImage(type, index) {
	if (type === 'idCard') {
		form.value.idCardImages.splice(index, 1);
	} else {
		form.value.licenseImage = '';
	}
}

function handleSubmit() {
	// 这里添加表单验证逻辑
	uni.showToast({
		title: '修改成功',
		icon: 'success'
	});
	setTimeout(() => {
		uni.navigateBack();
	}, 1500);
}
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #ffffff;
	padding: 20rpx;
	padding-bottom: 120rpx;
}
.top {
		width: 100%;
		height: 400rpx;
		background-image: url(/static/xiao@3x.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}

.form-list {
	padding: 0 20rpx;
	background-color: #ffffff;
	width: 650rpx;
	border-radius: 12rpx;
}

.form-item {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #eee;
}

.label {
	width: 200rpx;
	color: #333;
	font-size: 28rpx;
}

.input {
	flex: 1;
	height: 40rpx;
	font-size: 28rpx;
	color: #333;
}

.verify-code {
	padding-left: 30rpx;
	color: #007AFF;
	font-size: 28rpx;
}

.picker-value {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

.textarea-item {
	flex-direction: column;
	align-items: flex-start;
}

.textarea {
	width: 100%;
	height: 200rpx;
	margin-top: 20rpx;
	padding: 20rpx;
	background-color: #f8f8f8;
	border-radius: 8rpx;
	font-size: 28rpx;
}

.upload-section {
	margin-top: 40rpx;
}

.section-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.upload-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.upload-item {
	width: 200rpx;
	height: 200rpx;
	position: relative;
}

.upload-item image {
	width: 100%;
	height: 100%;
	border-radius: 8rpx;
}

.delete-btn {
	position: absolute;
	right: 10rpx;
	top: 10rpx;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 24rpx;
}

.upload-btn {
	width: 200rpx;
	height: 200rpx;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8rpx;
}

.plus {
	font-size: 60rpx;
	color: #999;
}

.submit-btn {
	position: fixed;
	bottom: 40rpx;
	left: 40rpx;
	right: 40rpx;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background-color: #007AFF;
	color: #fff;
	border-radius: 44rpx;
	font-size: 32rpx;
}
</style> 